<template>
  <div class="progress-container">
    <div class="progress-bar">
      <div class="progress" :style="{height: height + 'px'}">
        <div class="progress-outer">
          <div class="progress-inner" :style="{background: color, 'width': (num / sum) * 100 + '%'}" />
        </div>
      </div>
    </div>
    <div class="progress-text">{{ num }}</div>
  </div>
</template>

<script>
export default {
  props: {
    sum: {
      type: Number,
      default: 100
    },
    num: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: '#409eff'
    },
    height: {
      type: Number,
      default: 6
    }
  }
}
</script>

<style lang="scss" scoped>
.progress-container{
  position: relative;
  display: flex;
  align-items: center;
  width: 200px;
}
.progress-bar{
  display: inline-block;
  padding-right: 55px;
  margin-right: -55px;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  vertical-align: middle;
}
.progress{
  border-radius: 4px;
}
.progress-outer{
  background: #ebeef5;
  border-radius: 4px;
  overflow: hidden;
  height: 6px;
}

.progress-inner{
  height: 6px;
}

.progress-text{
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.progress-text{
  margin-left: 5px;
}
</style>
